<template>
  <div class="admin">
    <div class="doMessage">
      <div class="search">
        <input type="text" placeholder="请输入关键字" v-model="name" />
        <button @click="search">搜索</button>
      </div>
      <div class="add">
        <!-- <button>添加</button> -->
        <!-- <el-button type="text" @click="open">添加</el-button> -->
        <el-button type="text" @click="dialogFormVisible = true"
          >添加</el-button
        >

        <el-dialog title="添加管理员" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="账户名" :label-width="formLabelWidth">
              <el-input v-model="form.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" :label-width="formLabelWidth">
              <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="真实名字" :label-width="formLabelWidth">
              <el-input v-model="form.realname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" :label-width="formLabelWidth">
              <el-input v-model="form.telephone" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item> -->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="newData" style="width: 100%">
      <el-table-column label="用户编号" prop="_id"> </el-table-column>
      <el-table-column label="用户名" prop="account"> </el-table-column>
      <el-table-column label="真实姓名" prop="realname"> </el-table-column>
      <el-table-column label="联系方式" prop="telephone"> </el-table-column>
      <el-table-column align="center">
        <template slot="header" slot-scope="scope">
          <!-- <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/> -->
          操作
        </template>
        <template slot-scope="scope">
          <!-- <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button> -->
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      name: "",
      searchData: [],
      
      
      dialogFormVisible: false,
      form: {
        account: "",
        password: "",
        realname: "",
        telephone: "",
       
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    // handleEdit(index, row) {
    //   console.log(index, row);
    // },
   async handleDelete(row) {
      let obj={
        _id:row._id
      }
      await this.$http.admin.deleteAdmin(obj)
      this.getAdminApi()
    },

    async getAdminApi() {
      let { data: res } = await this.$http.admin.getAdmin();
      console.log(res);
      this.tableData = res.message;
    },
    search() {
      let newData = this.tableData.filter((item) =>
        item.account.includes(this.name)
      );
      this.searchData = newData;
    },
   async add(){
      let {data:res}=await this.$http.admin.addAdmin(this.form)
      this.dialogFormVisible = false
      this.getAdminApi()
    }
  },
  created() {
    this.getAdminApi();
  },
  computed: {
    newData() {
      if (this.searchData.length == 0) {
        return this.tableData;
      } else {
        return this.searchData;
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.admin {
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
}
.doMessage {
  display: flex;

  .search {
    width: 300px;
    height: 40px;
    display: flex;
    margin-right: 50px;
    input {
      flex-grow: 1;
    }
    button {
      width: 50px;
      border: none;
      outline: none;
      background-color: blue;
      color: white;
    }
  }
  .add {
    width: 80px;
    height: 40px;
    &>button {
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background-color: blue;
      color: white;
    }
  }
}
</style>